<template>
  <div class="login-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="登录">
      <!-- 插槽自定义左侧内容 -->
      <template #left>
        <img class="logo" src="@/assets/images/toutiao.png">
      </template>
    </van-nav-bar>
    <!-- 表单组件 -->
    <!-- @submit：表单的提交事件，如果每个表单项添加了rules属性，那么只有在所有表单项都校验成功了，才会提交 -->
    <!-- label：左侧的文本， placeholder：提示文案占位符，rules：校验规则 -->
    <!-- rules中的属性：required 必填项；message：错误提示信息；pattern：正则规则 -->
    <!-- v-model小技巧：因为表单的值需要提交给后台，所以建议取名的时候与后台的接口参数名保持一致 -->
    <van-form @submit="handleLogin">
      <van-field
      v-model="loginForm.mobile"
        label="手机号"
        placeholder="手机号"
        :rules="[
        { required: true, message: '请填写手机号' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号'}
        ]"
      />
      <van-field
      v-model="loginForm.code"
        label="验证码"
        placeholder="验证码"
        :rules="[
        { required: true, message: '请填写验证码', },
        { pattern: /^\d{6}$/, message: '请输入正确的验证码'}
        ]"
      />
      <div style="margin: 16px;">
        <!-- round：圆角按钮；block：块级元素；type="info"：按钮的类型；native-type="submit"：原生button的type属性，submit可以提交表单 -->
        <van-button round block :loading="loading" type="info" native-type="submit" loading-text="登录中...">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>

// 登录功能的实现流程：
// 1.建页面配路由
// 2.静态布局+样式(画界面)
// 3.收集表单数据
// 4.校验
// 5.提交请求
// 6.vuex + 本地存储共同管理 token
// 7.细节优化(请求成功与失败的捕获，防止登录重复点击)

export default {
  name: 'LoginView',
  data () {
    return {
      loginForm: {
        mobile: '13666668888', // 手机号
        code: '246810' // 验证码
      },
      // 控制登录按钮的加载状态
      loading: false
    }
  },
  methods: {
    // 点击登录
    async handleLogin () {
      // 在提交登录请求前，把按钮设置为登陆中状态
      this.loading = true

      // try-catch-finally：js中捕获错误的语法
      // try 中放可能出错的代码。如果 try 中代码没有出错则正常执行
      // 如果有错，则停止执行 try 中的后续代码，转而执行 catch 中的代码
      try {
        // 1.调用actions函数、传参
        await this.$store.dispatch('user/loginAction', this.loginForm)
        // 2.vuex保存token
        // 3.登陆成功的提示
        this.$toast.success('登录成功')
        // 4.跳转至首页(编程式导航)
        this.$router.replace(this.$route.query.redirectUrl || '/') // 路由跳转，但不可以回退
        // this.$router.push() 路由跳转，可以回退
        // this.$router.back() 后退一步
        // this.$router.forward() 前进一步
        // this.$router.go() 既可以前进也可以后退
        // 用法：this.$router.go(3) 前进三步；this.$router.go(-2) 后退两步
      } catch (err) {
        // 对错误做出处理
        // err 就是此次错误对象，记录了此次错误的原因
        // 登陆失败的提示
        this.$toast.fail('登录失败')
        console.log(err)
      } finally {
        // finally：不管 try 中的代码有没有错，finally 中的代码始终都会执行
        // 在登录请求结束后关闭按钮的加载状态
        this.loading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.logo {
  width: 100px;
  height: 30px;
}
</style>
